<template>
  <div class="columns">
    <div class="column is-full">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><em class="fa fa fa-book"> 新增优惠券 </em></span>
        </div>
        <div>
          <el-form :model="ruleForm" ref="ruleForm" label-width="160px" class="demo-ruleForm">
            <el-form-item label="优惠券名称" required prop="title" >
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.title"
                    placeholder="请输入优惠券名称"
                />
              </el-col>
            </el-form-item>

            <el-form-item label="抵扣金额" prop="discount" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.discount"
                    placeholder="请输入抵扣金额"
                />
              </el-col>
            </el-form-item>

            <el-form-item label="起用金额" prop="threshold" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.threshold"
                    placeholder="请输入起用金额"
                />
              </el-col>
            </el-form-item>

            <el-form-item label="起用日期" prop="startTime" required>
              <el-col :span="18">
                <el-date-picker
                    v-model="ruleForm.startTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="截止日期" prop="endTime" required>
              <el-col :span="18">
                <el-date-picker
                    v-model="ruleForm.endTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-col>
            </el-form-item>


            <el-form-item label="发放数量" prop="remainNum" required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.remainNum"
                    placeholder="请输入发放数量"
                />
              </el-col>
            </el-form-item>

            <el-form-item label="是否即刻可领" prop="couponState" required>
              <el-col :span="11">
                <el-switch
                    v-model="ruleForm.couponState"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0">
                </el-switch>
              </el-col>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
              >发布优惠券
              </el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import {addCoupon} from "@/api/coupon";
import {mapGetters} from "vuex";

export default {
  name: "addCoupon",
  computed: {
    ...mapGetters(["token", "user"]),
  },
  data() {
    return {
      ruleForm: {
        title: null,
        discount: null,
        threshold: null,
        startTime: null,
        endTime: null,
        couponState: null,
        remainNum: null
      }
    };
  },
  methods: {
    submitForm() {
      addCoupon(this.ruleForm);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>

</style>
